<template>
  <VTable ref="tableRef" v-bind="tableOptins">
    <template #form="{ form }">
      <XForm
        :fieldList="fieldList"
        :formOption="optionsData"
        :formData="form"
      ></XForm>
    </template>
  </VTable>
</template>
<script setup lang="jsx">
import { ElMessage } from "element-plus";
import { getCapitalFlowList } from "../../api.js";
import XForm from "@/components/XForm/index.vue";
const props = defineProps({
  optionsData: { type: Object, default: () => ({}) },
});
const { optionsData } = toRefs(props);
const tableOptins = reactive({
  formConfig: {
    data: {
      accountType: "",
      accountChannelId: "",
      currency: "",
    },
  },
  tooltipConfig: {
    showAll: false,
  },
  isToggle: true,
  columns: [
    {
      type: "checkbox",
      width: 50,
      fixed: "left",
    },
    {
      title: "类型",
      field: "accountType",
      minWidth: 100,
      slots: {
        default: ({ row }) => {
          return <span>{row?.accountType?.label || "-"}</span>;
        },
      },
    },
    {
      title: "渠道/银行",
      field: "channelName",
      minWidth: 100,
    },
    {
      title: "币种",
      field: "currency",
      minWidth: 100,
    },
    {
      title: "原币金额",
      field: "balance",
      minWidth: 100,
    },
    {
      title: "汇率",
      field: "exchangeRate",
      minWidth: 100,
    },
    {
      title: "人民币金额/RMB",
      field: "localBalance",
      minWidth: 100,
    },
    {
      title: "最近变更时间",
      field: "balanceUpdatedAt",
      width: 170,
    },
  ],
  proxyConfig: {
    props: {
      result: "data",
      total: "total",
    },
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => {
        return getCapitalFlowList({ ...form, ...page }).then((res) => {
          return {
            data: res.data,
            total: res.total,
          };
        });
      },
    },
  },
});
const publicStyle = { style: { width: "240px" } };
const fieldList = [
  {
    field: "accountType",
    originOption: "account_type",
    type: "select",
    // multiple: true,
    options: {
      placeholder: "类型",
    },
    ...publicStyle,
  },
  {
    field: "accountChannelId",
    originOption: "channelList",
    type: "select",
    // multiple: true,
    options: {
      placeholder: "渠道/银行",
      labelKey: "channelName",
      valueKey: "id",
    },
    ...publicStyle,
  },
  {
    field: "currency",
    originOption: "currency",
    type: "select",
    // multiple: true,
    options: {
      placeholder: "币种",
      valueKey: "label",
    },
    ...publicStyle,
  },
];
</script>
<style lang="scss" scoped>
.vx-table {
  height: calc(100% - 170px) !important;
}
</style>
